<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript"
                src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
        <script type="text/javascript" src="/javascripts/jquery.qrcode.min.js"></script>
        <!-- 中文转码 -->
        <script type="text/javascript">
            function qcodetochar(str) {
                var out, i, len, c;
                out = "";
                len = str.length;
                for (i = 0; i < len; i++) {
                    c = str.charCodeAt(i);
                    if ((c >= 0x0001) && (c <= 0x007F)) {
                        out += str.charAt(i);
                    } else if (c > 0x07FF) {
                        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                        out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    } else {
                        out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    }
                }
                return out;
            }
        </script>
        <title><%= title %></title>
    </head>
    <body>
        <input id="input_music_list" type="hidden" value="<%= musicList %>"/>
        <input id="input_ip" type="hidden" value="<%= ipString %>"/>
        <div id="app">
            <h2>{{musicNameText}}</h2>
            <audio v-bind:src="src_music" v-on:ended="event_ended" controls="controls" autoplay></audio>
        </div>
        <script type="text/javascript">
            var musicListJson = document.getElementById('input_music_list').value;
            console.log(musicListJson);
            var musicList = eval(musicListJson);
            var musicIndex = -1;
            var musicCount = musicList.length;

            var app = new Vue({
                el: '#app',
                data: {
                    musicNameText: '',
                    src_music: ''
                },
                methods: {
                    event_ended: function () {
                        playNext();
                    }
                }
            })

            var playNext = function () {
                musicIndex++;
                if (musicIndex === musicCount) {
                    musicIndex = 0;
                }
                var musicItem = musicList[musicIndex];
                app.musicNameText = musicItem.substring(musicItem
                        .lastIndexOf("/") + 1, musicItem.length);
                app.src_music = '.' + musicItem;
            }
            if (0 < musicCount) {
                playNext();
            }

            document.body.appendChild(document.createElement("p"));

            var ip = document.getElementById('input_ip').value;
            var ipTag = document.createElement("h2");
            ipTag.innerText = ip;
            document.body.appendChild(ipTag);
            var qr = document.createElement("div");
            document.body.appendChild(qr);
            $(qr).qrcode({
                "render": "div",
                "size": 100,
                "color": "#3a3",
                "text": ip
            });
        </script>

    </body>
</html>
